<template>
  <el-table
      :data="data"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      id="zTreeTable"
      ref="zTreeTable"
      row-key="id"
      class="tree-table"
  >
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column v-for="(column, index) in columns"
                     :prop="column.prop"
                     :label="column.label"
                     :align="column.align"
                     :width="column.width"
                     :show-overflow-tooltip="column.showOverflowTooltip"
                     :key="column.prop">
      <template slot-scope="scope">

        <template v-if="!column.render">
          <template v-if="column.formatter">
            <span v-html="column.formatter(scope.row, column)"/>
          </template>
          <template v-else>
            <span>{{ scope.row[column.prop] }}</span>
          </template>
        </template>
        <template v-else>
          <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"/>
        </template>
      </template>
    </el-table-column>

    <el-table-column :label="operates.title===undefined?'操作':operates.title" align="center"
                     :width="(operates.width===undefined||operates.width==='auto')?operates.list.length*100:operates.width"
                     :fixed="(device==='desktop')&&(operates.fixed===undefined?'right':operates.fixed)"
                     v-if="(operates.list.length > 0)"
    >
      <template slot-scope="scope">
        <div>
          <template v-for="(btn, key) in operates.list">
            <el-button :type="btn.type" size="mini" :icon="btn.icon"
                       :key="key"
                       v-permission="btn.permission"
                       :disabled="btn.disabled(scope.$index,scope.row)"
                       :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{
                btn.label
              }}
            </el-button>
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Getter} from 'vuex-class';

@Component({
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (createElement, context) => {
        //详细使用方法见 https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
        const params = {
          row: context.props.row,
          index: context.props.index,
          column: ''
        };
        if (context.props.column) {
          params.column = context.props.column;
        }
        return context.props.render(createElement, params);
      }
    }
  }
})
export default class TreeTable extends Vue {

  @Prop()  // 这是相应的字段展示
  private columns!: Array<any>;
  @Prop()//这是数据源
  private data!: Array<any>;

  @Prop()//// width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
  private operates!: any;
  @Getter('device') private device!: string;
  private multipleSelection: Array<any> = [];// 多行选中
  // 多行选中
  handleSelectionChange(val) {
    this.multipleSelection = val;
    this.$emit('handleSelectionChange', val);
  }
}
</script>
<style scoped>

</style>
